<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="TanShenghu">
    <title>Select 组件</title>
    <link rel="stylesheet" href="http://alinw.alicdn.com/platform/common/s/1.1/global/global.css">
    <style>
    *{margin:0;padding:0;}
    body{font-size:12px;padding:20px;}

    .ui-select{display:inline-block;vertical-align:middle;border:1px solid #d9d9d9;height:32px;cursor:pointer;-webkit-border-radius:3px;border-radius:3px;background-color:white;box-sizing:border-box;position:relative}
    .ui-select.ui-select-focus{border-color:#5eb4f0;}
    .ui-select [type="text"]{border:0;cursor:pointer;height:100%;line-height:30px;-webkit-border-radius:5px;border-radius:5px;padding-left:10px;}
    .ui-select [type="text"]:focus{-webkit-box-shadow:none;box-shadow:none}
    .ui-select i{width:20px;text-align:center;position:absolute;right:0;top:7px;font-size:17px;font-family:"kuma";font-style:normal;}
    .ui-select.disabled{background-color:#dedede;cursor:not-allowed}
    .ui-select.disabled [type="text"]{background-color:#dedede;cursor:not-allowed}
    #ui-selectdrop{background-color:white;border:1px solid #dedede;-webkit-border-radius:5px;border-radius:5px;max-height:220px;overflow-y:auto;z-index:1010}
    #ui-selectdrop .optgroup{}
    #ui-selectdrop .optgroup label{display:block;height:28px;line-height:28px;padding-left:10px;color:#333;font-weight:bold}
    #ui-selectdrop .optgroup a{padding-left:20px;}
    #ui-selectdrop a{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:28px;line-height:28px;padding-left:10px;padding-right:10px;color:#666;text-decoration:none;}
    #ui-selectdrop a:first-child{-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
    #ui-selectdrop a:last-child{-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
    #ui-selectdrop a[selected],#ui-selectdrop a:hover{background-color:#eff6fa}
    #ui-selectdrop a[disabled]{background-color:#999;cursor:not-allowed;}
    </style>
    <script src="http://a.alipayobjects.com/??seajs/seajs/2.2.0/sea.js,jquery/jquery/1.8.2/jquery.js"></script>
    <script>
    seajs.config({
        paths: {
            host: 'http://www.tanshenghu.com',
            widget: 'http://www.tanshenghu.com/widget'
        },
        alias: {
            $: 'host/static/js/$',
            'select': 'widget/select/1.0.0/select'
        }
    });
    </script>
</head>
<body>
    <br><br>
    <h1 style="height:60px"></h1>
    默认选中某值:
    <select style="width:220px;">
        <option value="AAAA">1111</option>
        <option value="BBBB" selected="selected">2223</option>
        <option value="CCCC">3333</option>
        <option value="DDDD">4444</option>
        <option value="EEEE" disabled="">5555</option>
    </select>
    下拉分组:
    <select style="width:350px;">
        <optgroup label="国术">
            <option>太极拳</option>
            <option>形意拳</option>
            <option>咏春拳</option>
            <option>洪拳</option>
            <option>八卦掌</option>
        </optgroup>
        <optgroup label="球类">
            <option>篮球</option>
            <option>乒乓球</option>
            <option disabled="">足球</option>
            <option>网球</option>
            <option>羽毛球</option>
        </optgroup>
    </select>
    禁用状态:
    <select style="width:120px;" disabled="disabled">
        <option>1111</option>
        <option>2223</option>
        <option selected="selected">3333</option>
        <option>4444</option>
    </select>
    <script>
        seajs.use('select', function( Select ){
            var ele = new Select({
                trigger: 'select', // 必选 原生select Dom对象
                top: 7, // 可选 下拉框与上边的距离
                infiniteWidth: false, // 下拉框的宽度是否固定 默认false是固定的
                readonly: true, // 是否可编辑,默认false
                eventType: 'mouseover', // 事件类型
                open: function( dropbox ){ // 当下拉框展开时触发
                    //this.find('i').html( '&#xe641;' );
                },
                render: function( ui_select ){ // 当组件初始化时触发
                    ui_select.find('i').html( '&#xe642;' );
                },
                change: function( select, ui_select, value ){ // 当选择某项change时触发
                    document.getElementsByTagName('h1')[0].innerHTML = value;
                }
            });
            
            // 如果我们的原生select后期，通过某些行为改变了其值我们可以调用set_uival方法去更新它对应的ui_select
            // ele.trigger('set_uival')  或者  ele[0].set_uival() 两者都可以
            
            
        });
    </script>
</body>
</html>